<template>
    <el-container>
        <el-aside width="300px">
            <div>
                <chat-people/>
            </div>
        </el-aside>
        <el-main>
            <div>
                <chat-message/>
            </div>
        </el-main>
    </el-container>
</template>


<script>
  import Bus from '../bus/bus.js';
    import ChatMessage from '../chat/ChatMessage.vue';
    import ChatPeople from '../chat/ChatPeople.vue';

export default {
    data() {
      return {
        items: [{
            message: 'Foo'
        },
        {
            message: 'Bar'
        }]
      }
    },
    components: {
        'chat-people': ChatPeople,
        'chat-message': ChatMessage,
    },
    setup() {
       Bus.$on('addAge',(data)=>{    
        console.log('Received data111:', data);    
      })
    }
}

</script>


<style>

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    /* line-height: 200px; */
    height: 100vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height:100vh
  }
  
  .el-container {
    height: 100%;
  }
  

</style>
